
<template>
  <div class="toolbar-container">
    <div class="left-toolbar">
      <RadioGroup 
        button-style="solid" 
        v-model:value="state.leftToolbarTab"
        @change="handleChangeTerminalType"
      >
        <RadioButton value="pc">{{ t('PC') }}</RadioButton>
        <RadioButton value="pad">{{ t('Pad') }}</RadioButton>
        <RadioButton value="h5">{{ t('H5') }}</RadioButton>
      </RadioGroup>
    </div>

    <div class="right-toolbar">
      <div class="right-toolbar-con"> 
        <a-button v-if="showToolButton('clearDesignerButton')" type="link" danger @click="clearFormWidget">
          <Icon icon="ant-design:delete-outlined" :size="18" />
          清空
        </a-button>

        <a-button v-if="showToolButton('previewFormButton')" type="link" @click="handlePreviewSelect">
          <Icon icon="ant-design:compress-outlined" :size="18"/>
          预览
        </a-button>

        <a-button v-if="showToolButton('exportJsonButton')" type="link" @click="exportJson">
          导出JSON
        </a-button>
        
      </div>
    </div>
    <ExportJson @register="registerExportJson" />
    <PreviewSelect @register="registerPreviewSelect" @success="handleOpenPreview"/>
    <Preview @register="registerPreview" />
  </div>
</template>
<script lang="ts" name="diy-form-setting-panel" setup>
import { ref, toRef, onMounted, toRaw, nextTick, Ref } from 'vue';
import type { CSSProperties } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { Icon } from '/@/components/Icon';
import ExportJson from './ExportJson.vue'
import PreviewSelect from './PreviewSelect.vue'
import Preview from './Preview.vue'
import { Tabs, RadioGroup, RadioButton } from 'ant-design-vue';
import { useModal } from '/@/components/Modal';
import { useDrawer } from '/@/components/Drawer';
import * as utils from '/@/utils/index'
// import infraApi from '/@/api/infra/index'
// import templateContent  from './template'
import type { Designer} from '../type'

const [registerExportJson, { openDrawer : openExportJson }] = useDrawer();
const [registerPreviewSelect, { openModal : openPreviewSelect }] = useModal();
const [registerPreview, { openDrawer : openPreview }] = useDrawer();


const props = defineProps({
  scrollerHeight: { type: String },
  designer: { type: Object as () => Designer}
})

// @ts-nocheck
const designer = (props.designer || {}) as Designer

const data = ref<any>({
  showExportJsonFlag: false,
  jsonContent: '',
  jsonRawContent: '',
  config: {}
}).value

const { t } = useI18n();
const state = ref({
  activeKey: 'widgetSetting',
  leftToolbarTab: designer.terminalType
})

onMounted(() => {

})

const showToolButton = (configName) => {
  return true
}

const handleChangeTerminalType = (type) => {
  props.designer?.changeTerminalType(type.target.value)
}

const clearFormWidget = () => {
  props.designer?.clearDesigner()
  // props.designer?.formWidget.clearWidgetRefList()
}

const genExportJson = () => {
  data.config = designer.genExportJson()
  data.jsonContent = JSON.stringify(data.config, null, '  ')
  data.jsonRawContent = JSON.stringify(data.config)
}

const exportJson = async () => {
  genExportJson()

  // const resp = await infraApi.codeGen.renderTemplate([
  //   { name: 'test', content: templateContent['vbenForm'], params: { widgetList: newWidgetList, globalConfig } }
  // ])
  // console.log('resp: ', resp)

  openExportJson(true, {
    content: data.jsonContent
  })
}

const handlePreviewSelect = () => {
  openPreviewSelect(true, {})
}

const handleOpenPreview = (select) => {
  genExportJson()
  openPreview(true, {
    config: data.config, select
  })
}

</script>

<style lang="less" scoped>

.toolbar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow:  row nowrap;
  justify-content: space-between;
}

.left-toolbar {
  height: 100%;
  display: flex;
  // margin-top: 4px;
  // float: left;
  font-size: 16px;
  // line-height: 42px;
}

.right-toolbar {
  display: flex;
  line-height: 42px;
  text-align: right;
  overflow: hidden;

  .right-toolbar-con {
    text-align: left;
    // width: 600px;
  }

  :deep(.ant-btn) {
    .anticon {
      margin-right: -2px;
    }
    padding: 4px 4px;
    font-size: 16px;

  }

}
</style>
